<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dialog{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            background-color: rgba(255,0,0,0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
        }
        .content{
            width: 600px;
            height: 300px;
            border: 2px solid #000000;
            background-color: white;
            padding: 30px;
        }
    </style>
    <script src="employee.js"></script>
    <script>
        function $(id){
            return document.getElementById(id);
        }

        window.onload = function (){
            initTable(emArray);
        }

        /**
         * 表格数据初始化
         */
        function initTable(arr){
            let str = "";
            arr.forEach(n =>{
               str += `<tr><td>${n.code}</td><td>${n.name}</td><td>${n.sex}</td>
                        <td>${n.job}</td><td>${n.money}</td>
                        <td><input type="button" value="删除" onclick="del(${n.code})">
                        <input type="button" value="修改" onclick="findById(${n.code})"></td></tr>`;
            });
            $("data").innerHTML = str;
        }

        /**
         * 查找员工
         */
        function findEmployee(){
            var newArray =  emArray.filter(n => n.name.indexOf($("name").value) != -1)
            initTable(newArray);
        }

        /**
         * 添加
         */
        function add(){
            if(checkAdd() == false){
                return;
            }

            var obj = {code:parseInt($("addId").value),name:$("addName").value,sex:getSex(),
                job:$("addJob").value,money:parseInt($("addMoney").value)};
            emArray.push(obj);
            initTable(emArray);
            $("addDiv").style.visibility = "hidden";

            $("addId").value = "";
            $("addName").value = "";
            $("addJob").value = "";
            $("addMoney").value = "";
            $("idDiv").innerHTML = "";
        }

        function checkAdd(){
            //验证编号不能重复
            var index = emArray.findIndex(n => n.code == $("addId").value);
            if(index != -1){
                idDiv.innerHTML = "编号已存在";
                return false;
            }
            return true;
        }

        function getSex(){
            //得到name属性为sex的元素集合
            var sexArray = document.getElementsByName("sex");
            for(var i=0;i<sexArray.length;i++){
                if(sexArray[i].checked){
                    return sexArray[i].value;
                }
            }
        }

        /**
         * 删除
         * @param code 要删除员工的编号
         */
        function del(code){
            //查找编号对应
            var index = emArray.findIndex(n => n.code == code);
            //删除元素
            emArray.splice(index,1);
            initTable(emArray);
        }

        var updateObj;
        function findById(code){
            $("updateDiv").style.visibility = "visible";
            //得到指定下标对应对象
            updateObj = emArray.find(n => n.code == code);
            $("updateId").innerHTML = updateObj.code;
            $("updateName").innerHTML = updateObj.name;
            $("updateSex").innerHTML = updateObj.sex;
            $("updateJob").value = updateObj.job;
            $("updateMoney").value = updateObj.money;
        }

        function updateInfo(){
            updateObj.job = $("updateJob").value;
            updateObj.money = parseInt($("updateMoney").value);
            $("updateDiv").style.visibility = "hidden";
            initTable(emArray);
        }
        var isAsc = true;
        function sortEmployee(fieldName){
            emArray.sort((a,b) => {
                var x = isAsc?a[fieldName] - b[fieldName] : b[fieldName] - a[fieldName];
                return x;
            });
            initTable(emArray);
            isAsc = !isAsc;
        }
    </script>
</head>
<body>
    <input type="button" value="添加" onclick="$('addDiv').style.visibility = 'visible'">
    <table border="1" cellspacing="0" width="60%">
        <thead><tr><th onclick="sortEmployee('code',true)">编号</th><th>姓名</th><th>性别</th><th>职位</th><th onclick="sortEmployee('money',false)">工资</th><th>操作</th></tr></thead>

        <tbody id="data"></tbody>
    </table>
    请输入姓名：<input type="text" id="name"> <input type="button" value="查找" onclick="findEmployee()">

    <div id="addDiv" class="dialog">
        <div class="content">
            编号：<input type="text" id="addId"><br>
            <div id="idDiv" style="font-size: 12px;color: red"></div>
            姓名：<input type="text" id="addName"><br>
            性别：<input type="radio" value="男" name="sex" checked>男
            <input type="radio" value="女" name="sex" >女
            <br>
            职位：<input type="text" id="addJob"><br>
            工资：<input type="text" id="addMoney"><br>
            <input type="button" value="添加" onclick="add()">
        </div>
    </div>

    <div id="updateDiv" class="dialog">
        <div class="content">
            编号：<span id="updateId"></span><br>
            姓名：<span id="updateName"></span><br>
            性别：<span id="updateSex"></span>
            <br>
            职位：<input type="text" id="updateJob"><br>
            工资：<input type="text" id="updateMoney"><br>
            <input type="button" value="修改" onclick="updateInfo()">
        </div>
    </div>
</body>
</html>